<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面</title>
    <link rel="stylesheet" href="statics/css/font.css">
    <link rel="stylesheet" href="statics/css/login.css">
    <link rel="stylesheet" href="statics/css/xadmin.css">
    <link rel="stylesheet" href="statics/css/demo.css" media="all">
    <link rel="stylesheet" href="statics/css/xian.css">
    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="statics/js/prompt.js"></script>
    <script src="statics/layui/layui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            function fixHeight() {
                var headerHeight = $("#switcher").height();
                $("#iframe").attr("height", $(window).height()-54+ "px");
            }
            $(window).resize(function () {
                fixHeight();
            }).resize();

            $('.icon-monitor').addClass('active');

            $(".icon-mobile-3").click(function () {
                $("#by").css("overflow-y", "auto");
                $('#iframe-wrap').removeClass().addClass('mobile-width-3');
                $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
                $(this).addClass('active');
                return false;
            });

            $(".icon-mobile-2").click(function () {
                $("#by").css("overflow-y", "auto");
                $('#iframe-wrap').removeClass().addClass('mobile-width-2');
                $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
                $(this).addClass('active');
                return false;
            });

            $(".icon-mobile-1").click(function () {
                $("#by").css("overflow-y", "auto");
                $('#iframe-wrap').removeClass().addClass('mobile-width');
                $('.icon-tablet,.icon-mobile,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
                $(this).addClass('active');
                return false;
            });

            $(".icon-tablet").click(function () {
                $("#by").css("overflow-y", "auto");
                $('#iframe-wrap').removeClass().addClass('tablet-width');
                $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
                $(this).addClass('active');
                return false;
            });

            $(".icon-monitor").click(function () {
                $("#by").css("overflow-y", "hidden");
                $('#iframe-wrap').removeClass().addClass('full-width');
                $('.icon-tablet,.icon-mobile-1,.icon-monitor,.icon-mobile-2,.icon-mobile-3').removeClass('active');
                $(this).addClass('active');
                return false;
            });
        });
    </script>

</head>
<body >
<canvas class="cavs" width="1536" height="640"></canvas>

<div class="loginmain">
    <div class="login-title">
        <span>客户管理系统-管理员登录</span>
    </div>
    <form method="post" class="layui-form" name="denglu">
    <div class="login-con">
        <div class="login-user">
            <div class="icon">
                <img src="https://www.17sucai.com/preview/806169/2020-11-24/%E7%99%BB%E9%99%86/image/user_icon_copy.png" alt="">
            </div>
            <input type="text" name="user_name" placeholder="用户名" autocomplete="off" value="">
        </div>
        <div class="login-pwd">
            <div class="icon">
                <img src="https://www.17sucai.com/preview/806169/2020-11-24/%E7%99%BB%E9%99%86/image/lock_icon_copy.png" alt="">
            </div>
            <input type="password" name="user_password" placeholder="密码" autocomplete="off" value="">
        </div>
        <div class="login-btn">
            <input value="登录" name="submit"  lay-submit  lay-filter="login" style="width:100%;" type="submit">
        </div>
    </div>
    </form>
</div>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="statics/js/ban.js"></script>
<script>
    layui.use(['form','jquery','layer'],function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;

        //监听表单的提交事件
        //根据lay-filter="login"中的login监听到提交，选择post提交到控制器
        form.on("submit(login)",function (data) {
            $.post("user/login",data.field,function(result){
                console.log(result);
                console.log(data.field.user_name);
                var name = data.field.user_name;
                //判断是否成功
                if(result.success){
                    location.href="shouye.html?user_name="+name;

                }else{
                    layer.msg("用户名密码错误，登录失败");
                }
            },"json");
            //禁止页面跳转
            return false;
        })

    });
</script>

</body>
</html>